<template>
  <view class="app bg-white">
    <view v-if="college.cover">
      <image class="w-full" mode="widthFix" :src="college.cover"></image>
    </view>
    <view class="py-20rpx px-25rpx relative">
      <text class="detail-title">{{ college.title }}</text>
    </view>
   
    <u-sticky :offset-top="offset" v-if="college.audio">
      <mt-audio :poster="college.cover" :title="college.title" :src="college.audio"></mt-audio>
    </u-sticky>

    <view v-if="college.video">
      <video class="w-full" :src="college.video"></video>
    </view>
    <mt-uparse :html="college.content" :preview="false" :selectable="true"></mt-uparse>
  </view>
</template>

<script lang="ts" setup>
  import mtAudio from '@/components/mt-audio/mt-audio.vue';
  import mtUparse from '@/components/mt-uparse/mt-uparse.vue';
  import { ref } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { getCollegeDetail as getDataApi } from '@/api/college/index';
  import type { CollegeItem } from '@/types/college';
  import { report } from '@/utils/exception';

  const college = ref<CollegeItem>({} as CollegeItem);
  const offset = ref(0);

  onLoad((option: any) => {
    const id = option.id;
    getDataApi(id)
      .then((res) => {
        college.value = res.data;
      })
      .catch((err) => {
        report(err);
      });
  });
</script>

<style lang="scss" scoped>
  .detail-title {
    display: flex;
    padding-left: 25rpx;
    font-size: 30rpx;
    font-weight: 600;
    line-height: 45rpx;

    &::before {
      content: '';
      width: 8rpx;
      height: 34rpx;
      background: orange;
      top: 26rpx;
      left: 27rpx;
      position: absolute;
      border-radius: 10rpx;
    }
  }
</style>
